<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/order' }"
      >订单列表详情</el-breadcrumb-item
    >
    <el-breadcrumb-item>编辑订单</el-breadcrumb-item>

    <!-- <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
  </el-breadcrumb>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>编辑订单</span>
      </div>
    </template>
    <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">
      <el-form-item label="订单号" prop="orderid">
        <el-input v-model="form.orderid" disabled />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="form.status">
          <el-option label="未收货" value="未收货" />
          <el-option label="已收货" value="已收货" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="pay">
        <el-radio-group v-model="form.pay" disabled>
          <el-radio label="支付宝" />
          <el-radio label="微信" />
          <el-radio label="银行卡" />
          <el-radio label="花呗" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)"
          >修改</el-button
        >
        <el-button @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
  
  <script  setup>
import { onMounted, reactive, ref } from "vue";
// import { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { fromPairs } from "lodash";
import { order_edit } from "../../../utils/api";
var $router = useRouter();
var $route = useRoute();
const formSize = ref("default");
const ruleFormRef = ref();
const form = reactive({
  orderid: "",
  name: "",
  phone: "",
  address: "",
  status: "",
  pay: "",
  desc: "",
});
var edit = $route.query;
// 接收订单列表传来的数据
onMounted(() => {
  form.orderid = String(edit.orderid);
  form.name = String(edit.name);
  form.phone = String(edit.phone);
  form.address = String(edit.address);
  form.status = String(edit.status);
  form.pay = String(edit.pay);
});
const rules = reactive({
  name: [{ required: true, message: "姓名不能为空" }],
  phone: [{ required: true, message: "电话不能为空" }],
  address: [{ required: true, message: "地址不能为空" }],
  region: [{ required: true, message: "请选择订单状态" }],
});
const back = () => {
  $router.push("/index/order");
};
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      order_edit(form).then((res)=>{
        if (res.data.code == 304) {
          ElMessage.error(res.data.msg);
        } else {
          $router.push("/index/order");
        }
      })
      // axios.post("/api/order/edit", { editorder: form }).then((res) => {
      //   if (res.data.code == 304) {
      //     ElMessage.error(res.data.msg);
      //   } else {
      //     $router.push("/index/order");
      //   }
      // });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
  <style scoped>
.el-breadcrumb {
  height: 40px;
  margin-bottom: 10px;
  line-height: 40px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 100%;
}
</style>